<template>
  <div>
    <el-row class="form-block">
      <el-col class="ne-title" :span="21">
        <slot name="fixed">不隐藏的插槽</slot>
        <div v-show="ishow">
          <slot>可隐藏的插槽</slot>
        </div>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="query">查询</el-button>
        <a
          id="moreMes"
          class="ne-tab-toggle"
          :class="{ hover: ishow }"
          @click="showHandler"
          >{{ (ishow ? "收起" : "更多") + clktext }}</a
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    clktext: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      ishow: false,
    };
  },
  methods: {
    showHandler() {
      this.ishow = !this.ishow;
    },
    query() {
      this.$emit("queryMethods");
    },
  },
};
</script>

<style lang="scss" scoped>
.ne-relative-4 {
  position: relative;
  top: 0.04rem;
}
.ne-tab-toggle {
  text-decoration: none;
  color: #666;
  font-size: $fontSize_base;
  line-height: 0.32rem;
  background: url(~@/assets/imgs/sq.png) no-repeat .1rem center;
  background-size: 0.14rem auto;
  padding-left: 0.3rem;
  text-decoration: none;
  cursor: pointer;
  margin-left: 0.1rem;
  display: inline-block;
  padding-right: .1rem;
  height: .32rem;
  border: 1px solid #666;
  border-radius: .05rem;
  box-sizing: border-box;
  //font-size: $fontSize_v3;
}
.ne-tab-toggle:hover {
  text-decoration: none;
  color: #666;
}
.ne-tab-toggle.hover {
  background: url(~@/assets/imgs/zk.png) no-repeat .1rem center;
  background-size: 0.14rem auto;
}
</style>
